<template>
	<view class="wrap">
		<view class="image">
			<image src="/static/logo.png" mode="" style="width: 400rpx; height: 300rpx;"></image>
		</view>

		<view class="form">
			<uni-forms ref="valiForm" :modelValue="vehicleFormData">
				<!-- 车辆类型（下拉选择框） -->
				<uni-forms-item label="车辆类型" name="type" required labelWidth="200">
					<uni-data-select v-model="vehicleFormData.type" :localdata="vehicleTypes" placeholder="请选择车辆类型" />
				</uni-forms-item>
				<!-- 车辆型号（下拉选择框） -->
				<uni-forms-item label="车辆型号" name="model" required labelWidth="200">
					<uni-data-select v-model="vehicleFormData.model" :localdata="vehicleModels" placeholder="请选择车辆型号" />
				</uni-forms-item>
				<!-- 车牌号码 -->
				<uni-forms-item label="车牌号码" name="number" required labelWidth="200">
					<uni-easyinput v-model="vehicleFormData.number" placeholder="请输入车牌号码" />
				</uni-forms-item>
				<!-- 车主姓名 -->
				<uni-forms-item label="车主姓名" name="name" required labelWidth="200">
					<uni-easyinput v-model="vehicleFormData.name" placeholder="请输入车主姓名" />
				</uni-forms-item>
				<!-- 电话号码 -->
				<uni-forms-item label="电话号码" name="phoneNumber" required labelWidth="200">
					<uni-easyinput v-model="vehicleFormData.phoneNumber" placeholder="请输入电话号码" />
				</uni-forms-item>
				<!-- 照片地址 -->
				<uni-forms-item label="照片地址" name="imageUrl"  >
					<uni-file-picker v-model="vehicleFormData.imageUrl"  fileMediatype="image" :image-styles="imageStyles"

						file-mediatype="image" limit="1">
						<template #default>
						       <view class="upload-container">
						         <view class="upload-icon">
						           <text class="plus-icon">+</text>
						         </view>
						         <text class="upload-text">上传车辆图片</text>
						       </view>
						     </template>
					</uni-file-picker>
				</uni-forms-item>
			</uni-forms>
			
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	// 表单数据
	const vehicleFormData = reactive({
		type: "", // 车辆类型
		model: "", // 车辆型号
		number: "", // 车牌号码
		name: "", // 车主姓名
		phoneNumber: "", // 电话号码
		imageUrl: "", // 照片地址
	});

	// 车辆类型选项
	const vehicleTypes = reactive([{
			value: "car",
			text: "轿车"
		},
		{
			value: "suv",
			text: "SUV"
		},
		{
			value: "truck",
			text: "卡车"
		},
		{
			value: "van",
			text: "面包车"
		},
	]);

	// 车辆型号选项
	const vehicleModels = reactive([{
			value: "model1",
			text: "型号1"
		},
		{
			value: "model2",
			text: "型号2"
		},
		{
			value: "model3",
			text: "型号3"
		},
	]);

	// 文件上传方法
	const uploadUrl = () => {
		return "http://123415"
	};

	// 上传成功回调
	const handleUploadSuccess = (res) => {
		console.log('上传成功', res);
		// 将后端返回的图片地址赋值给表单数据
		vehicleFormData.imageUrl.value = res.data.url;
		uni.showToast({
			title: '上传成功',
			icon: 'success',
		});
	};

	// 上传失败回调
	const handleUploadFail = (err) => {
		console.error('上传失败', err);
		uni.showToast({
			title: '上传失败，请重试',
			icon: 'none',
		});
	};

	// 校验规则
	const rules = reactive({
		type: {
			rules: [{
				required: true,
				errorMessage: "请选择车辆类型"
			}, ],
		},
		model: {
			rules: [{
				required: true,
				errorMessage: "请选择车辆型号"
			}, ],
		},
		number: {
			rules: [{
					required: true,
					errorMessage: "车牌号码不能为空"
				},
				{
					pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Za-z][A-Za-z0-9]{5}$/,
					errorMessage: "车牌号码应为省份简称+字母+5位数字或字母"
				},
			],
		},
		name: {
			rules: [{
					required: true,
					errorMessage: "车主姓名不能为空"
				},
				{
					pattern: /^[\u4e00-\u9fa5]{2,4}$/,
					errorMessage: "车主姓名应为2-4个汉字"
				},
			],
		},
		phoneNumber: {
			rules: [{
					required: true,
					errorMessage: "电话号码不能为空"
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: "电话号码应为11位数字且以1开头"
				},
			],
		},
	});

	// 表单提交
	const valiForm = ref(null);
	const submit = () => {
		valiForm.value
			.validate()
			.then(() => {
				uni.showToast({
					title: "提交成功",
					icon: "success",
				});
				// 这里可以添加提交表单的逻辑
				console.log("表单数据：", vehicleFormData);
				uni.redirectTo({
					url: "/pages/vehicle/addVehicleSuccess/addVehicleSuccess"
				})
			})
			.catch((err) => {
				uni.showToast({
					title: "表单校验失败",
					icon: "none",
				});
				console.error("校验失败：", err);
			});
	};
	
	//设置图片样式,有了这个才可以回显
	let imageStyles = {
					width:150,
					height:150,
					border:{
						style:'dashed',
						radius:'2px'
					}
				};
</script>

<style scoped>
	.image {
		text-align: center;
		margin-top: 20px;
	}

	.form {
		padding: 20px;
		width: 70vw;
		margin-left: 10vw;
	}

	.upload-container {
		width: 150px; 
		height: 150px; 
		/* border: 1px dashed #ddd; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 8px;
		background-color: #f9f9f9;
		cursor: pointer;
	}

	.upload-icon {
		margin-bottom: 10px;
	}

	.plus-icon {
		font-size: 32px;
		color: #666;
	}

	.upload-text {
		font-size: 14px;
		color: #666;
	}
	
	
</style>